<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">long press copy</view>
			<view class="tui-page__desc">长按复制，可自定义复制内容</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<view class="tui-longpress__box thorui-flex__center"><tui-copy-text value="复制文本,上侧显示" color="#586c94"></tui-copy-text></view>
			<view class="tui-longpress__box thorui-flex__center"><tui-copy-text direction="bottom" value="复制文本,下侧显示" color="#586c94"></tui-copy-text></view>
			<view class="tui-longpress__box thorui-flex__center"><tui-copy-text direction="left" value="复制文本,左侧显示" color="#586c94"></tui-copy-text></view>
			<view class="tui-longpress__box thorui-flex__center"><tui-copy-text direction="right" value="复制文本,右侧显示" color="#586c94"></tui-copy-text></view>
			<view class="tui-longpress__box thorui-flex__center">
				<tui-copy-text value="自定义复制内容[ThorUI QQ群4：928308676]" copyValue="928308676" color="#586c94"></tui-copy-text>
			</view>
			<!-- <view class="tui-longpress__box thorui-flex__center"><tui-copy-text systemCopy  value="复制文本,浏览器效果" :size="32"></tui-copy-text></view> -->
			<view class="tui-longpress__box thorui-flex__center"><tui-copy-text value="不显示按钮,直接复制" color="#586c94" :showCopyBtn="false"></tui-copy-text></view>
			<view class="tui-longpress__box thorui-flex__center">
				<tui-copy-text value="复制以及扩展按钮 上侧" color="#586c94" :buttons="buttons" @click="buttonTap"></tui-copy-text>
			</view>
			<view class="tui-longpress__box thorui-flex__center">
				<tui-copy-text value="只显示扩展按钮,去掉复制" color="#586c94" :buttons="buttons" removeCopy @click="buttonTap"></tui-copy-text>
			</view>
			<view class="tui-longpress__box thorui-flex__center">
				<tui-copy-text direction="right" value="复制以及扩展按钮 右侧" color="#586c94" :buttons="buttons" @click="buttonTap"></tui-copy-text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			buttons: ['引用', '扩展']
		};
	},
	methods: {
		buttonTap(e) {
			console.log(e);
			if (e.index == 0) {
				this.tui.toast('你点击了：引用');
			} else {
				this.tui.toast('你点击了：扩展');
			}
		}
	}
};
</script>

<style>
.container {
	padding-bottom: 120rpx;
}
.tui-longpress__box {
	width: 100%;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
}
</style>
